<template>
  <div>
    <c-r-m-list-head title="订单统计" :crm-type="crmType" placeholder="请输入合同编号" @on-search="crmSearch" @on-export="exportInfos" />
    <!-- v-empty="!crm.complete.index" xs-empty-icon="nopermission" xs-empty-text="暂无权限" -->
    <div class="crm-container">
      <!-- <flexbox v-if="selectionList.length > 0" class="selection-bar">
            <div class="selected—title">已选中<span class="selected—count">{{selectionList.length}}</span>项</div>
            <flexbox class="selection-items-box">
              <flexbox class="selection-item" @click.native="pickClick()">
                <img class="selection-item-icon" src="@/assets/img/selection_get.png" />
                <div class="selection-item-name">捡取</div>
              </flexbox>
            </flexbox>
          </flexbox>s
          </flexbox> -->
      <c-r-m-table-head
        ref="crmTableHead"
        crm-type="orderstatistics"
        type="orderstatistics"
        :isSeas="true"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
      ></c-r-m-table-head>
      <el-table
        class="n-table--border"
        id="crm-table"
        v-loading="loading"
        :data="list"
        :height="tableHeight"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        :cell-style="cellStyle"
        @row-click="handleRowClick"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column show-overflow-tooltip type="selection" align="center" width="55">
          </el-table-column> -->
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          show-overflow-tooltip
          :fixed="index == 0"
          :prop="item.prop"
          :label="item.label"
          width="160"
          :formatter="fieldFormatter"
        >
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="check_status_info" label="操作" :resizable="false" width="280"
          align="center" fixed="right">
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
          <template slot-scope="scope">
            <div class="status_button" :style="getStatusStyle('2')" v-if="commission"
              @click="handleMoney(scope.row.assignfield_id,'填写提成')">
              填写提成
            </div>
            <div class="status_button" :style="getStatusStyle('1')" v-if="fieldreception&&scope.row.status == '待接收'"
              @click="handlePull(scope.row,0)">
              接收
            </div>
            <div class="status_button" :style="getStatusStyle('1')" v-if="fieldreception&&scope.row.status == '未完结'"
              @click="handlePull(scope.row,1)">
              完结
            </div>
            <div class="status_button" :style="getStatusStyle('1')"
              @click="handleDivided(scope.row.assignfield_id,'操作记录')" v-if="recordelog">
              操作记录
            </div>
            <div class="status_button" :style="getStatusStyle('1')" style="cursor: pointer;"
              v-if="scope.row.status=='未完结'&&addflow" @click="handleDivided(scope.row.assignfield_id,'跟进记录')">
              填写跟进记录
            </div>
          </template>
        </el-table-column> -->
        <el-table-column fixed="right" width="56">
          <template slot="header" slot-scope="slot">
            <img src="@/assets/img/t_set.png" @click="handleTableSet" class="table-set" />
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          class="p-bar"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          layout="slot, total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crmType="rowType"
      :id="rowID"
      type="complete"
      @handle="handleHandle"
      class="d-view"
    >
    </c-r-m-all-detail>
    <fields-set
      :crmType="crmType"
      @set-success="setSave"
      :dialogVisible.sync="showFieldSet"
    ></fields-set>
    <teams-handle
      :crmType="crmType"
      :title="teamsTitle"
      :selectionList="selectionList"
      @handle="handleCallBack"
      :orderList="orderList"
      :contractId="contractId"
      :dialogVisible.sync="teamsDialogShow"
    ></teams-handle>
    <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" /> -->
    <el-dialog
      title="修改核算月份"
      :visible.sync="showMonth"
      width="300px"
      @close="closeMonth"
    >
      <el-date-picker
        v-model="rowMonth"
        type="month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        placeholder="选择日期"
        style="width: 100%"
      />
      <el-button
        type="primary"
        :loading="loading"
        style="margin-top: 20px; width: 100%"
        @click="handleMonth"
        >修改</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import {
  personnelFieldreception,
  adminIndexAuthList,
  personnelRecordelog,
} from "@/api/common";
import { accountPicking } from "@/api/customermanagement/common";
import { updateCalculateMonth } from "@/api/customermanagement/workbench";
import CRMAllDetail from "@/views/customermanagement/components/CRMAllDetail";
import table from "../mixins/table";
import TeamsHandle from "@/views/customermanagement/components/selectAccounting/TeamsHandle";

export default {
  /** 客户管理 的 订单列表 */
  name: "orderDataCenterIndex",
  components: {
    CRMAllDetail,
    TeamsHandle,
  },
  mixins: [table],
  data() {
    return {
      crmType: "orderstatistics",
      contractId: "",
      assignfield_id: "",
      moneyData: null, //订单列表金额
      isSeas: true,
      teamsDialogShow: false,
      selectionList: [],
      orderList: [],
      teamsTitle: "",
      fieldreception: "",
      commission: "",
      addflow: false,
      recordelog: false,
      changmonth: false, // 修改日期权限
      showMonth: false,
      rowMonth: "",
    };
  },
  created() {
    this.getAuth();
  },
  mounted() {},
  methods: {
    handleRecord() {},
    handleMoney(id, type) {
      this.contractId = id.toString();
      this.teamsTitle = type;
      this.teamsDialogShow = true;
    },
    handlePull(row, type) {
      this.$prompt("请输入备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          personnelFieldreception({
            status: type,
            assignfield_id: row.assignfield_id,
            remark: value,
          }).then((res) => {
            console.log(res.data, "res.data");
            this.$message.success(res.data);
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 获取权限
    getAuth() {
      return new Promise((resolve, reject) => {
        adminIndexAuthList()
          .then((response) => {
            const data = response.data;
            this.fieldreception = data.crm.personnel
              ? data.crm.personnel.fieldreception
              : false;
            this.commission = data.crm.personnel ? data.crm.personnel.commission : false;
            this.addflow = data.crm.personnel ? data.crm.personnel.addflow : false;
            this.recordelog = data.crm.personnel ? data.crm.personnel.recordelog : false;
            this.changmonth = data.crm.orderstatistics
              ? data.crm.orderstatistics.changmonth
              : false;
            resolve(response);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    pickClick() {
      this.$confirm("确定要捡取该工单吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = this.selectionList.map((item) => {
            return item.contract_id;
          });
          accountPicking({
            contract_id: ids,
          })
            .then((res) => {
              this.$message.success(res.data);
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    handleDivided(id, type) {
      console.log(id, type, "handleDivided");
      this.contractId = id.toString();
      this.teamsTitle = type;
      personnelRecordelog({
        assignfield_id: id,
      })
        .then((res) => {
          this.teamsDialogShow = true;
          this.orderList = res.data;
        })
        .catch(() => {});
    },
    // 子组件 回调的 结果
    handleCallBack(data) {
      this.$emit("handle", {
        type: data.type,
      });
    },
    // 修改核算月份
    handleMonth() {
      this.loading = true;
      updateCalculateMonth({
        finance_id: this.rowID,
        calculate_month: this.rowMonth,
      })
        .then((res) => {
          this.$message.success(res.data);
          this.getList();
          this.closeMonth();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 关闭核算月份
    closeMonth() {
      this.showMonth = false;
      this.rowMonth = "";
      this.rowID = "";
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "num") {
        return {
          color: "#3E84E9",
          cursor: "pointer",
        };
      } else if (column.property === "calculate_month" && this.changmonth) {
        return {
          color: "#3E84E9",
          cursor: "pointer",
        };
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
/** 勾选操作 */
.selection-bar {
  font-size: 14px;
  height: 34px;
  color: #777;
  margin: 10px 16px;

  .selected—title {
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid $--table-border-color;

    .selected—count {
      color: $xr-color-primary;
    }
  }
}

.selection-items-box {
  .selection-item {
    width: auto;
    padding: 15px;

    .selection-item-icon {
      display: block;
      margin-right: 5px;
      width: 15px;
      height: 15px;
    }

    .selection-item-name {
      cursor: pointer;
      color: #777;
    }

    .selection-item-name:hover {
      color: $xr-color-primary;
    }
  }
}
</style>
